<template>
	<view class="search-content">
		<view class="text-area">
			<u-icon size="70" name="arrow-left" @click="backtoHome"></u-icon>

			<uniSearchBar v-model="searchValue" :radius="30" class="search-input" placeholder="搜索" bgColor="#F1F1F1"
				@confirm="search" @cancel="cancel" />

			<!-- 如果加入搜索按钮,可以伪造触发用户按下enter事件 -->

		</view>
		<!-- <view class="top_search">
			<view class="left_jiantou">
				<u-icon size="70" name="arrow-left"></u-icon>
			</view>
			<view class="center_search">
				<u-search height="100" :showAction="false" :animation="true" v-model="searchValue" @search="search"></u-search>
			</view>
			<view @click="search" class="right_wenzi">
				<p>搜索</p>
			</view>
		
		</view> -->

		<view class="" v-if="this.$store.state.search.searchSkuList.length ===0">
			<view class="search-title" v-if="localSearchList.length">
				<view class="title">
					<view class="text">
						搜索历史
					</view>
					<uni-icons @click="handleOnDelete" class="icon" type="trash"></uni-icons>
				</view>
				<tagList :tabValueName="tabValueName" :tagShowName="tagShowName" :type="type" :tagList="localSearchList"
					@delete="handleDelete" @select="handleSelectTag" />
			</view>
			<view class="search-title" v-if="recommendList.length">
				<view class="title">
					<view class="text">
						搜索推荐
					</view>
					<uni-icons @click="handleRecommend" class="icon" type="reload"></uni-icons>
				</view>
				<tagList :tabValueName="tabValueName" :tagShowName="recommendTabShowName" :tagList="recommendList"
					@select="handleSelectRecommendTag" />
			</view>
		</view>

	</view>
</template>

<script>
	import uniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
	import uniSearchBar from './components/uni-search-bar.vue'
	import tagList from '@/components/tag-list/tag-list.vue'
	const localSearchListKey = '__local_search_history'
	export default {
		props: {
			maxSearchListLength: {
				type: Number,
				default: 10
			},
			recommendList: {
				type: Array,
				default: []
			},
			recommendTabShowName: {
				type: String,
				default: 'label'
			},
			recommendTabValueName: {
				type: String,
				default: 'value'
			}
		},
		components: {
			tagList,
			uniSearchBar,
			uniIcons
		},
		data() {
			return {
				searchValue: '',
				localSearchList: uni.getStorageSync(localSearchListKey) || [],
				tabValueName: '_createTime',
				tagShowName: 'value',
				type: '', // delete【右上角出删除图标，无法选中，点击图标回调@delete】

				searchBoxHeight: 0,
			}
		},
		created() {

		},
		mounted() {
			this.$nextTick(() => {
				this.calculateHeight()

			})
		},
		methods: {
			calculateHeight() {
				uni.createSelectorQuery()
					.in(this)
					.select('.text-area')
					.boundingClientRect((data) => {
						if (data) {
							console.log('1111节点高度：', data.height);
							this.searchBoxHeight = `${data.height}px`;
						}
					})
					.exec();
			},
			search(search) {

				if (search.value) {
					const findIndex = this.localSearchList.findIndex(item => item.value === search.value)
					if (findIndex !== -1) this.localSearchList.splice(findIndex, 1)
					if (this.localSearchList.length >= this.maxSearchListLength) this.localSearchList.pop()
					this.localSearchList.unshift({
						_createTime: new Date().getTime(),
						value: search.value
					})
					this.updateLocalStorage()
				}
				this.$emit('search', search.value)
			},
			/**
			 * 点击取消
			 */
			cancel() {
				this.$emit('cancel')
			},
			/**
			 * 点击删除按钮切换删除模式
			 */
			handleOnDelete() {

				if (!this.type) this.type = 'delete'
				else this.type = ''

				console.log(this.type);
			},
			/**
			 * 选中、取消标签
			 */
			handleSelectTag(seletedTagList) {
				const selectItem = seletedTagList[0]
				this.searchValue = selectItem.value
				this.$emit('search', this.searchValue, selectItem)
			},
			/**
			 * 选中推荐标签
			 */
			handleSelectRecommendTag(seletedTagList) {
				const selectItem = seletedTagList[0]
				this.searchValue = selectItem[this.recommendTabShowName]
				this.$emit('search', this.searchValue, seletedTagList[0])
			},
			/**
			 * 点击删除标签回调
			 */
			handleDelete(data) {
				const {
					item,
					index
				} = data
				this.localSearchList.splice(index, 1)
				this.updateLocalStorage()
			},
			/**
			 * 点击更换推荐
			 */
			handleRecommend() {
				this.$emit('recommend')
			},
			/**
			 * 更新缓存
			 */
			updateLocalStorage() {

				uni.setStorageSync(localSearchListKey, this.localSearchList)
			},
			backtoHome() {
				uni.navigateBack()
			}
		},
	}
</script>

<style lang="scss" scoped>
	.search-content {
		color: #333;
		font-size: 28rpx;
		padding: 25rpx 0 0 0;

		.text-area {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.search-input {
				flex: 1;
			}
		}

		// .text-area {
		// 	margin: 0 auto 0;
		// 	width: 720rpx;
		// 	height: 70rpx;
		// 	border-radius: 60rpx;
		// 	display: flex;
		// 	align-items: center;

		// 	.search-input {
		// 		width: 100%;
		// 	}
		// }

		.search-title {
			padding: 34rpx 15rpx 0rpx 30rpx;

			.title {
				display: flex;
				justify-content: space-between;
				font-weight: 500;
				font-size: 30rpx;
				margin-bottom: 34rpx;

				.icon {
					font-size: 42rpx !important;
				}
			}
		}
	}


	.top_search {

		display: flex;
		justify-content: space-between;
		align-items: center;


		.center_search {
			flex: 1;
			margin: 0 20px;
		}

		.right_wenzi {
			font-size: 25px;
			font-weight: bolder;

		}
	}
</style>